<template>
  <div class="startExam"> 
    <head-Menu></head-Menu>
    <div class="SEContainer">
      <div class="examHeader">
        <h4 style="margin:10px 0">{{toExam.examName}}</h4>
        <div style="text-align:right;margin-right:30px">距考试结束还有：<span id="t_m"></span><span id="t_s"></span></div>
      </div>
      <div class="answerSheet">
        <div v-if="infTitle.choiceQue != 0" style="min-height:70px;padding-left: 10px">选择题
          <div v-for="(data, i) in textPaper.choiceQue">
            <h5><span style="max-width:800px;display:block; ">{{i + 1}}、({{data.topicScore}}分){{data.stem}}</span></h5>
            <el-radio-group v-model="option[i]" size="mini" >
              <el-radio label="A" style="margin-bottom:5px;margin-top: -50px;">A、{{data.A}}</el-radio>
              <el-radio label="B" style="margin-bottom:5px">B、{{data.B}}</el-radio>
              <el-radio label="C" style="margin-bottom:5px">C、{{data.C}}</el-radio>
              <el-radio label="D" style="margin-bottom:5px">D、{{data.D}}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div v-if="infTitle.judgeQue != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">判断题
          <div v-for="(data, i) in textPaper.judgeQue">
            <h5><span style="max-width:800px;display:block; ">{{i + 1}}、({{data.topicScore}}分){{data.stem}}</span></h5>
            <el-radio-group v-model="judge[i]" size="mini" >
              <el-radio label="true" style="margin-bottom:5px;margin-top: -50px;">
                <i class="el-icon-check"></i>
              </el-radio>
              <el-radio label="false" style="margin-bottom:5px">
                <i class="el-icon-close"></i>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div v-if="infTitle.fillBlankQue != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">填空题
          <div v-for="(data, i) in textPaper.fillBlankQue">
            <h5><span style="max-width:800px;display:block; ">{{i + 1}}、({{data.topicScore}}分){{data.stem}}</span></h5>
            <el-input style="width:300px" v-model="fillBlank[i]" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div v-if="infTitle.comprehensiveQue != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">综合题
          <div v-for="(data, i) in textPaper.comprehensiveQue">
            <h5><span style="max-width:800px;display:block; ">{{i + 1}}、({{data.topicScore}}分){{data.stem}}</span></h5>
            <el-input style="width:500px" type="textarea" :autosize="{ minRows: 4, maxRows: 30}" placeholder="请输入内容" v-model="comprehensive[i]"></el-input>
          </div>
        </div>
      </div>
      <div class="submitBtn">
        <el-button @click="submitExam" type="primary" style="margin:15px auto;">提 交</el-button>
      </div>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getExamPaper, uploadExamInf, automaticCorrectPapers } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      toExam: {},
      textPaper: {},
      option: [],
      judge: [],
      fillBlank: [],
      comprehensive: [],

      infTitle: {
        choiceQue: 0, 
        judgeQue: 0, 
        fillBlankQue: 0, 
        comprehensiveQue: 0
      },

      timer: null,
    }
  },
  components: {
    headMenu
  },
  props: {
    params: {
        type: Object,
        default:{}
    }
  },
  created() {
    this.toExam = JSON.parse(sessionStorage.getItem('toExam'))
    this.getExamPaper(this.toExam)
  },
  activated () {
    this.timer = setInterval(() => {
      this.countDown(); //每秒更新一次时间
    }, 1000);
  },
  mounted(){
    this.timer
  },
  deactivated () {
    clearInterval(this.timer)
    this.timer = null

    // 清除数据防止返回
    sessionStorage.clear()
    Object.assign(this.$data, this.$options.data.call(this));
  },
  methods: {
    async getExamPaper(inf) {
      await getExamPaper(inf)
        .then((res) => {
          this.textPaper = res.textPaper
          console.log(res.textPaper);

          // console.log('填写答案' ,JSON.parse(sessionStorage.getItem('ExamInf')));
          let examdata = JSON.parse(sessionStorage.getItem('ExamInf'))
          if (examdata != null) {
            this.option = examdata.option
            this.judge = examdata.judge
            this.fillBlank = examdata.fillBlank
            this.comprehensive = examdata.comprehensive
          }
          this.getInfTitle()
        })
    },
    async uploadExamInf(upInf) {
      await uploadExamInf(upInf)
        .then((res) => {
          Toast(res.msg)
        })
    },
    async automaticCorrectPapers(ACPInf) {
      await automaticCorrectPapers(ACPInf)
    },
    getInfTitle() {
      let type = ['choiceQue', 'judgeQue', 'fillBlankQue', 'comprehensiveQue']
      for (let i = 0; i < type.length; i++) {
        this.infTitle[type[i]] = this.textPaper[type[i]].length
      }
    },
    countDown(){
      let NowTime = new Date();
      let t = new Date(this.toExam.EndTime).getTime() - NowTime.getTime();
      let m = Math.floor(t/1000/60%60) + 60 * Math.floor(t/1000/60/60%24);
      let s = Math.floor(t/1000%60);
      if (m < 10) { m = '0' + m }
      if (s < 10) { s = '0' + s }
      document.getElementById("t_m").innerHTML = m + "分";
      document.getElementById("t_s").innerHTML = s + "秒";

      // 保持数据
      sessionStorage.setItem('ExamInf', JSON.stringify({
        option: this.option,
        judge: this.judge,
        fillBlank: this.fillBlank,
        comprehensive: this.comprehensive,
      }))
    },
    submitExam(){
      this.$confirm('考试还未结束是否提前交卷?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.uploadExamInf({
          examFileName: this.toExam.examFileName,
          account: this.params.account,
          username: this.params.username,
          examName: this.toExam.examName,
          examPaper: this.toExam.examPaper,
          subject: this.toExam.subject,
          option: this.option,
          judge: this.judge,
          fillBlank: this.fillBlank,
          comprehensive: this.comprehensive,
        })
        
        if (this.infTitle.fillBlankQue == 0 && this.infTitle.comprehensiveQue == 0) {
          this.automaticCorrectPapers({
            examFileName: this.toExam.examFileName,
            account: this.params.account,
            username: this.params.username,
            examName: this.toExam.examName,
            examPaper: this.toExam.examPaper,
            subject: this.toExam.subject,
          })
        }

        setTimeout(() => {
          this.$router.push({
            path: '/login'
          })
        }, 1000)
      })
    },
  },
}
</script>

<style lang='stylus'>
.startExam
  color #666
  flex 1 1 100%
  display block
  .SEContainer
    background-color #fffef9
    text-align center
    .examHeader
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    .answerSheet
      text-align left
      margin 20px 30px 0 30px
      overflow-y auto
      max-height 470px
    .submitBtn
      height 65px
      box-shadow: 0 0 5px #ccc
</style>